<template>
  <canvas></canvas>
</template>

<script>
export default {
  name: "PixelPoint",
  mounted() {
    this.init();
  },
  methods: {
    init() {
      var canvas = document.querySelector("canvas");
      var ctx = canvas.getContext("2d");

      // 获取父元素的宽高
      var width = document.getElementById("page-container").clientWidth;
      var height = document.getElementById("page-container").clientHeight;

      canvas.style.width = width + "px";
      canvas.style.height = height + "px";

      // 处理图像的清晰度
      var scale = window.devicePixelRatio; // Change to 1 on retina screens to see blurry canvas.
      canvas.width = Math.floor(width * scale);
      canvas.height = Math.floor(height * scale);

      // Normalize coordinate system to use css pixels.
      // ctx.scale(scale, scale);

      // 范围内的随机整数
      function randomInt(min, max) {
        return Math.floor(Math.random() * (max - min + 1)) + min;
      }

      // 画图
      class point {
        constructor(x, y) {
          this.r = 3;
          this.x = randomInt(0, canvas.width - this.r / 2);
          this.y = randomInt(0, canvas.height - this.r / 2);
          this.xSpeed = randomInt(-50, 50);
          this.ySpeed = randomInt(-50, 50);
          this.lastDrawTime = null;
        }
        draw() {
          if (this.lastDrawTime) {
            // 计算当前时间小点的位置
            let now = new Date().getTime();
            let time = now - this.lastDrawTime;
            if (time > 1000 / 60) {
              let x = this.x + this.xSpeed * (time / 1000); // 每秒运动距离
              let y = this.y + this.ySpeed * (time / 1000);

              if (x > canvas.width - this.r / 2) {
                x = canvas.width - this.r / 2;
                this.xSpeed = -this.xSpeed;
              } else if (x < 0) {
                x = 0;
                this.xSpeed = -this.xSpeed;
              }

              if (y > canvas.height - this.r / 2) {
                y = canvas.height - this.r / 2;
                this.ySpeed = -this.ySpeed;
              } else if (y < 0) {
                y = 0;
                this.ySpeed = -this.ySpeed;
              }

              this.x = x;
              this.y = y;

              this.lastDrawTime = now;
            }
          }
          ctx.beginPath();
          ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI);
          ctx.fillStyle = "rgb(200,200,200)";
          ctx.fill();
          this.lastDrawTime = new Date().getTime();
        }
      }

      class Graph {
        constructor(number = 100) {
          this.points = new Array(number).fill(0).map(() => new point());
          this.max = 300;
        }

        draw() {
          requestAnimationFrame(() => {
            this.draw();
          });
          ctx.clearRect(0, 0, canvas.width, canvas.height);

          for (let i = 0; i < this.points.length; i++) {
            const p1 = this.points[i];
            p1.draw();

            for (let j = 0; j < this.points.length; j++) {
              const p2 = this.points[j];
              // 两点间距离
              // 1. 勾股定理
              const d = Math.sqrt((p1.x - p2.x) ** 2 + (p1.y - p2.y) ** 2);
              if (d > this.max) continue;
              ctx.beginPath();
              ctx.moveTo(p1.x, p1.y);
              ctx.lineTo(p2.x, p2.y);
              ctx.strokeStyle = `rgba(200,200,200,${1 - d / this.max})`;
              ctx.stroke();
            }
          }
        }
      }

      const graph = new Graph();
      graph.draw();

      //   const p1 = new point();
      //   const p2 = new point();
      //   p1.draw();
      //   p2.draw();

      //   ctx.beginPath();
      //   ctx.moveTo(100, 50);
      //   ctx.lineTo(200, 100);
      //   ctx.stroke();

      //   ctx.beginPath();
      //   ctx.arc(100, 50, 3, 0, 2 * Math.PI);
      //   ctx.fill();

      //   ctx.beginPath();
      //   ctx.arc(200, 100, 3, 0, 2 * Math.PI);
      //   ctx.fill();
    },
  },
};
</script>

<style>
</style>